<script lang="ts" setup>
// eslint-disable-next-line ts/ban-ts-comment
// @ts-ignore
import VueResizable from 'vue-resizable'
import { CirclePlus, Switch } from '@element-plus/icons-vue'

import { isArrayString } from '~/utils/string.js'
import { methodBgClass } from '~/utils/config'
import WorkspaceTableDocParam from './table/docParam.vue'

onMounted(() => {})

const setting = ref({
  method: 'GET',
  url: '/api/ping',
  type: '1',
  json: '',
  authType: 'Bearer',
  authText: '',
})

const record: any = ref(
  {
    requestparam: '',
    requestdemo: '',
    responseparam: '',
    responsedemo: '',
  },
)
// 请求参数
const requestRef = ref()
const requestList: any = ref([])
const requestSchema = ref('table')
const requestKey = ref(0)
function handleRequestSchema(schema: string) {
  if (schema === 'table') {
    record.value.requestparam = JSON.stringify(requestList.value, null, 2)
    requestSchema.value = 'json'
  }
  else {
    if (!isArrayString(record.value.requestparam)) {
      ElMessage.error('请求参数不符合格式')
      return
    }
    requestList.value = JSON.parse(record.value.requestparam)
    requestSchema.value = 'table'
  }

  requestKey.value++
}
function handleRequestChange(list: any) {
  requestList.value = list
  record.value.requestparam = JSON.stringify(list)
}
function handleRequestAdd() {
  requestRef.value.handleAdd()
}

// 返回参数
const responseRef = ref()
const responseList: any = ref([])
const responseSchema = ref('table')
const responseKey = ref(0)
function handleResponseSchema(schema: string) {
  if (schema === 'table') {
    record.value.responseparam = JSON.stringify(responseList.value, null, 2)
    responseSchema.value = 'json'
  }
  else {
    if (!isArrayString(record.value.responseparam)) {
      ElMessage.error('请求参数不符合格式')
      return
    }
    responseList.value = JSON.parse(record.value.responseparam)
    responseSchema.value = 'table'
  }

  responseKey.value++
}

function handleResponseChange(list: any) {
  responseList.value = list
  record.value.responseparam = JSON.stringify(list)
}
function handleResponseAdd() {
  responseRef.value.handleAdd()
}
</script>

<template>
  <main class="mix-splitter h-full w-full">
    <header class="mb-2.5 flex items-center px-1">
      <div class="h-8 flex flex-1 items-center border-1 border-[#e1e1e1] rounded bg-[#f8f8f8] px-3">
        <span
          class="mr-2 h-5 flex items-center rounded px-1"
          :class="setting.method ? methodBgClass[setting.method.toLowerCase()] : ''"
        >
          {{ setting.method }}
        </span>
        <span class="text-xs color-[#171b1f]">{{ setting.url }}</span>
      </div>
      <div class="ml-2 flex items-center">
        <el-button type="primary">
          保存
        </el-button>
      </div>
    </header>
    <section class="overflow-auto px-1" style="height: calc(100% - 40px);">
      <VueResizable :active="['b']" :height="320" :min-height="32">
        <section class="mt-2 h-full overflow-hidden text-sm">
          <header class="mb-2 h-7 flex items-center justify-between">
            <div class="flex items-center color-[#171b1f]">
              <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
              <span>请求参数</span>
            </div>
            <div>
              <el-button v-if="requestSchema !== 'json'" link @click="handleRequestAdd">
                <el-tooltip effect="dark" content="添加参数" placement="top">
                  <el-icon size="18">
                    <CirclePlus />
                  </el-icon>
                </el-tooltip>
              </el-button>
              <el-button link @click="handleRequestSchema(requestSchema)">
                <el-tooltip effect="dark" content="切换视图" placement="top">
                  <el-icon size="18">
                    <Switch />
                  </el-icon>
                </el-tooltip>
              </el-button>
            </div>
          </header>
          <section v-show="requestSchema === 'table'" class="w-full" style="height: calc(100% - 44px)">
            <WorkspaceTableDocParam ref="requestRef" :list="requestList" @change="(val:any) => handleRequestChange(val)" />
          </section>
          <section v-show="requestSchema === 'json'" class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 44px)">
            <JsonEditor :key="requestKey" v-model="record.requestparam" language="json" />
          </section>
        </section>
      </VueResizable>
      <VueResizable :active="['b']" :height="320" :min-height="32">
        <section class="mt-2 h-full overflow-hidden text-sm">
          <header class="mb-2 h-7 flex items-center justify-between">
            <div class="flex items-center color-[#171b1f]">
              <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
              <span>请求示例</span>
            </div>
          </header>
          <section class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 44px)">
            <JsonEditor v-model="record.requestdemo" language="json" />
          </section>
        </section>
      </VueResizable>
      <VueResizable :active="['b']" :height="320" :min-height="32">
        <section class="mt-2 h-full overflow-hidden text-sm">
          <header class="mb-2 h-7 flex items-center justify-between">
            <div class="flex items-center color-[#171b1f]">
              <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
              <span>返回参数</span>
            </div>
            <div>
              <el-button v-if="responseSchema !== 'json'" link @click="handleResponseAdd">
                <el-tooltip effect="dark" content="添加参数" placement="top">
                  <el-icon size="18">
                    <CirclePlus />
                  </el-icon>
                </el-tooltip>
              </el-button>
              <el-button link @click="handleResponseSchema(responseSchema)">
                <el-tooltip effect="dark" content="切换视图" placement="top">
                  <el-icon size="18">
                    <Switch />
                  </el-icon>
                </el-tooltip>
              </el-button>
            </div>
          </header>
          <section v-show="responseSchema === 'table'" class="w-full" style="height: calc(100% - 44px)">
            <WorkspaceTableDocParam ref="responseRef" :list="responseList" @change="(val:any) => handleResponseChange(val)" />
          </section>
          <section v-show="responseSchema === 'json'" class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 44px)">
            <JsonEditor :key="responseKey" v-model="record.responseparam" language="json" />
          </section>
        </section>
      </VueResizable>
      <VueResizable :active="['b']" :height="320" :min-height="32">
        <section class="mt-2 h-full overflow-hidden text-sm">
          <header class="mb-2 h-7 flex items-center justify-between">
            <div class="flex items-center color-[#171b1f]">
              <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
              <span>返回示例</span>
            </div>
          </header>
          <section class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 44px)">
            <JsonEditor v-model="record.responsedemo" language="json" />
          </section>
        </section>
      </VueResizable>
    </section>
  </main>
</template>

<style lang="scss" scoped>
@use '~/assets/splitpanes.scss';
@use '~/assets/custom.scss';
</style>
